<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>搜索</title>
    <link rel="stylesheet" href="__JS__/vjs/video-js.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li, a {
            list-style: none;
            text-decoration: none;
        }

        a:link, a:visited, a:hover, a:active {
            color: #000;
        }

        /*详情*/
        .list {
            margin-top: 48px;
        }

        .list .item {
            width: 100%;
            text-align: center;
            border-bottom: 6px solid #eee;
            overflow: hidden;
            position: relative;
        }

        .list .item .vod {
            height: 13.2rem;
            background-size: cover;
            position: relative;
        }

        .vod .play-btn {
            width: 48px;
            height: 48px;
            top: 50%;
            left: 50%;
            margin-left: -1.47rem;
            margin-top: -1.47rem;
            z-index: 10;
            position: absolute;
            background: url(/public/static/img/h5/play.svg) no-repeat center;
            background-size: cover;
        }

        .vod .duration {
            background-color: rgba(0, 0, 0, .5);
            width: 43px;
            height: 18px;
            line-height: 18px;
            bottom: 8px;
            right: 8px;
            z-index: 10;
            position: absolute;
            border-radius: .6rem;
            color: #fff;
            font-size: 12px;
        }

        .item .title {
            height: 4.5rem;
            padding: 12px 15px 0 14px;
            font-size: 15px;
            color: #fff;
            text-align: left;
            position: relative;
            top: 0;
            left: 0;
            z-index: 10;
            background: url(/public/static/img/h5/bg_title.png) no-repeat center;
            background-size: cover;
        }

        .item p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            font-size: 13px;
            color: #666;
            margin: 0 20px;
        }

        .item p span {
            padding-left: 22px;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .share {
            /*background-image: url(/public/static/img/h5/share.png);*/
            padding: 5px !important;
            background-color: #f5f7f9;
            color: #999;
            border-radius: 5px;
        }

        .look {
            background-image: url(/public/static/img/h5/look.png?5);
        }

        .zan {
            background-image: url(/public/static/img/h5/zan1.png);
        }

        .zan.active {
            background-image: url(/public/static/img/h5/zan2.png);
            color: #fd4d5e
        }

        /*播放器*/
        .vod-box {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            margin-top: 44px;
            width: 100%;
            z-index: 100;
        }

        .video-js {
            height: 13.2rem;
            width: 100%;
        }

        .video-js .vjs-big-play-button {
            display: none;
        }

        .video-js .vjs-error-display {
            display: none;
        }

        .video-js .vjs-progress-control:hover .vjs-progress-holder {
            font-size: 1em;
        }

        .video-js .vjs-fullscreen-control {
            display: none;
        }

        a, input, button {
            outline: none;
        }

        li.last, li.loading {
            color: #999;
            text-align: center;
            padding: 5px 0 35px 0;
        }
    </style>
    <style>
        /*没找到*/
        .hgnn {
            margin: 0 auto;
        }

        .hhhf {
            width: 14rem;
            height: 14rem;
            margin: auto;
            padding-top: 2.5rem;
        }

        .hhhx {
            text-align: center;
            font-size: 1rem;
            color: #666;
            padding-top: 3rem;
        }

        .hhhy {
            text-align: center;
            font-size: .8rem;
            color: #bbb;
            padding-top: 1rem;
        }

        .p16 {
            padding: 0 1rem;
        }

        .h1k {
            font-size: 1rem;
            font-weight: 700;
            padding-top: .8rem;
        }

        hr {
            display: block;
            margin: 15px 0;
            padding: 0;
            height: 1px;
            border: 0;
            border-top: 1px solid #eee;
        }

        .om1 {
            width: 100%;
            overflow: hidden;
            margin-bottom: 49px;
        }

        .lix0 {
            width: 50%;
            float: left;
            margin-bottom: 20px;
        }

        .lix0 .kos {
            width: 15px;
            height: 15px;
            display: inline-block;
            text-align: center;
            line-height: 15px;
            margin-right: 10px;
            color: #fff;
        }

        .kos1 {
            background-color: #dc3745;
        }

        .kos2 {
            background-color: #ff751c;
        }

        .kos3 {
            background-color: #ffa101;
        }

        .kos4 {
            background-color: #d0d3d8;
        }

        .kos5 {
            background-color: #d0d3d8;
        }

        .kos6 {
            background-color: #d0d3d8;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .wxw2 {
            width: 49%;
        }

        .oin {
            position: relative;
        }

        .w875 {
            font-size: 0.875rem;
            font-weight: 400;
        }

        .wimg {
            width: 100%;
            border-radius: .5rem;
        }

        .time1 {
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            position: absolute;
            font-size: .75rem;
            width: 2.75rem;
            height: 1.25rem;
            right: .5rem;
            bottom: .75rem;
            line-height: 1.25rem;
            text-align: center;
            border-radius: 1rem;
        }

        .lix0:nth-last-child(1), .lix0:nth-last-child(2) {
            margin-bottom: 0;
        }

        .back {
            width: 1.8rem;
            height: 2rem;
            margin-top: .5rem;
            margin-left: .75rem;
            vertical-align: middle;
            background: url() left no-repeat;
            background-size: 40%;
            z-index: 999999999;
            float: left;
        }

        .sp2 {
            font-size: 15px;
        }

        /*搜索框*/
        .header {
            width: 100%;
            height: 48px;
            background: #fff;
            position: fixed;
            top: 0;
            z-index: 9999;
        }

        .soi1 {
            width: 100%;
            float: left;
            height: 3rem;
            position: relative;
        }

        .soi4 {
            width: 60%;
            height: 2rem;
            background-color: #e1e1e1;
            margin-top: .5rem;
            background-image: url();
            background-repeat: no-repeat;
            background-size: 1.15rem;
            background-position: .5rem center;
            border-radius: .4rem;
            padding-left: 2rem;
            line-height: 2rem;
            font-size: 1rem;
            position: relative;
            float: left;
        }

        .sxxi {
            position: absolute;
            top: 0;
            width: 80%;
            height: 2rem;
            font-size: .95rem;
            color: #111;
            outline: none;
            background-color: transparent;
            border-style: none;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }

        .soi6 {
            width: 1rem;
            height: 1rem;
            position: absolute;
            right: 0.5rem;
            top: .5rem;
            display: block;
            background-image: url();
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .soi2 {
            width: 17%;
            float: right;
            text-align: center;
            position: absolute;
            right: 0;
            top: 0;
            height: 3rem;
            line-height: 3rem;
            font-size: 1rem;
            color: #fd4c5e;
        }
    </style>
</head>
<body>
<!--搜索框-->
<div class="header">
    <div class="soi1">
        <div class="back" onclick='window.android._goBack("true");'></div>
        <div class="soi4" style="-webkit-user-select:text !important;">
            <input type="text" class="sxxi btn" placeholder="请输入关键字搜索" value="">
            <a class="soi6" href="javascript:"></a>
        </div>
    </div>
    <div class="soi2">搜索</div>
</div>

<!--热门搜索-->
<div class="hgnn100">
    <div class="p16">
        <h1 class="h1k">热门搜索</h1>
        <hr>
        <div class="om1">
            {volist name="$KeySearch" id="vo"}
            <div class="lix0">
                <span class="kos kos{$i}">{$i}</span>
                <span class="sp2">{$vo}</span>
            </div>
            {/volist}
        </div>
    </div>
    <div class="p16">
        <h1 class="h1k">大家都在看</h1>
        <hr>
        <div class="om1">
            <div class="wxw2 fl" data-key="{$data_t[0]['fileName']}">
                <div class="oin">
                    <img src="{$data_t[0]['pic']}" class="wimg">
                    <div class="time1">{:s_to_hs($data_t[0]['duration'])}</div>
                </div>
                <p class="w875">{$data_t[0]['fileName']|msubstr=###,0,23,'utf-8'}</p>
            </div>
            <div class="wxw2 fr" data-key="{$data_t[1]['fileName']}">
                <div class="oin">
                    <img src="{$data_t[1]['pic']}" class="wimg">
                    <div class="time1">{:s_to_hs($data_t[1]['duration'])}</div>
                </div>
                <p class="w875">{$data_t[1]['fileName']|msubstr=###,0,23,'utf-8'}</p>
            </div>
        </div>
    </div>
</div>

<!--搜索结果页-->
<ul class="list"></ul>

<!--隐藏的播放器-->
<div class="vod-box">
    <video id="vjs" class="video-js" poster="/public/static/img/1.png" controls data-setup="{}">
        <source src="/public/static/img/1.mp4" type="video/mp4"/>
    </video>
</div>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/vjs/video.min.js"></script>
<script>
    var $list = $('.list');
    var $vodBox = $(".vod-box");
    var Player = videojs('vjs', {});
    videojs.log.level('off');

    var type;
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        var vodBoxTop = $vodBox.offset().top;
        var vodBoxHeight = $vodBox.height();

        //向上滚动边界
        if (scrollTop > (vodBoxTop + vodBoxHeight)) {
            Player.pause();
        }

        //向下滚动边界
        if (($(window).height() + scrollTop) < vodBoxTop) {
            Player.pause();
        }
    });

    var first = false;
    var current_vid;

    //点击播放按钮播放视频
    $list.on('click', '.play-btn', function () {
        //视频播放统计
        if(first && current_vid){
            video_stats(current_vid);
        }

        current_vid = $(this).parent().data('fid');
        first = true;

        //加载视频
        var url = $(this).parent().data('url');
        Player.src(url);
        Player.load(url);
        Player.play();

        //播放器定位
        var top = $(this).parent().parent().position().top;
        $vodBox.css('top', parseInt(top) - 44).show();
    });

    //微信分享
    $list.on('click', '.share', function () {
        var data = {
            'url': location.origin + "/h5_index",
            'img': 'https://www.baidu.com/img/bd_logo1.png?qua=high',
            'title': '标题',
            'content': '1212121'
        };
        var json = JSON.stringify(data);
        window.android._app_share(json);
    });

    //视频点赞
    $list.on('click', '.zan', function () {
        var span = $(this);
        if (span.hasClass('active')) {
            span.removeClass('active');
            type = -1;

        } else {
            span.addClass('active');
            type = 1;
        }

        var sum = span.html();
        span.html(parseInt(sum) + type);

        $.ajax({
            url: '/vod_zan?' + Math.random(),
            type: "GET",
            dataType: "json",
            data: {fid: $(this).parent().siblings('.vod').data('fid'), type: type},
            success: function (res) {
            }
        });
    });

    //搜索框功能
    $(".soi6").click(function () {
        $(".soi4 .btn").val("").focus();
    });

    $(".soi2").click(function () {
        var keyword = $(".btn").val();
        $.searchXML(keyword);
    });

    $('.btn').keypress(function (event) {
        var keyNum = (event.keyCode ? event.keyCode : event.which);
        if (keyNum == '13') {
            var keyword = $(".btn").val();
            $.searchXML(keyword);
        }
    });

    //热门搜索
    $(".lix0").click(function () {
        var keyword = $(this).find('span').eq(1).html();
        $.searchXML(keyword);
        $(".btn").val(keyword);
    });

    $(".wxw2").click(function () {
        var keyword = $(this).data('key');
        $.searchXML(keyword);
        $(".btn").val(keyword);
    });

    //查询功能
    $.searchXML = function (keyword) {
        $vodBox.hide();
        Player.pause();

        if (keyword == "") {
            $('.hgnn100').show();
            $list.html('');
            return;
        }

        $.ajax({
            url: '/h5_search?' + Math.random(),
            type: "POST",
            dataType: "json",
            data: {keyword: keyword},
            success: function (res) {
                var html = '';
                if (res.data.length > 0) {
                    html = html_str(res);
                    $list.append('<li class="last">已经见底</li>');
                } else {
                    html += '<div class="hgnn">';
                    html += '<div class="hhhf">';
                    html += '<img src="__H5__/xs22.png" width="100%">';
                    html += '</div>';
                    html += '<div class="hhhx">很抱歉，未能找到相关视频</div>';
                    html += '<div class="hhhy">快去寻找您喜欢的视频吧！</div>';
                    html += '</div>';
                }

                $('.hgnn100').hide();
                $list.html(html).show();
            }
        });
    };

    function html_str(res) {
        var html = '';
        for (var i = 0; i < res.data.length; i++) {
            var duration = s_to_hs(res.data[i]['duration']);
            var cid = res.data[i]['cid'];

            html += '<li><div class="item">';

            //长按的时候将图片改为背景图(img会弹微信的菜单)
            html += '<div class="vod" data-fid="' + res.data[i]['fileId'] + '" data-url="' + res.data[i]['fileUrl'] + '" style="background-image:url(' + res.data[i]['pic'] + ');">';
            html += '<div class="title">' + res.data[i]['fileName'] + '</div>';
            html += '<span class="play-btn"></span>';
            html += '<span class="duration">' + duration + '</span></div>';
            html += '<p data-fid=' + res.data[i]['fileId'] + '>';
            html += '<span class="share">视频搜索</span>';
            html += '<span class="look">' + res.data[i]['play'] + '</span>';
            html += '<span class="zan">' + res.data[i]['love'] + '</span>';
            html += '</p></div></li>';
        }

        return html;
    }

    //时间转换
    function s_to_hs(s) {
        var h;
        h = Math.floor(s / 60);
        s = s % 60;
        h += '';
        s += '';
        h = (h.length == 1) ? '0' + h : h;
        s = (s.length == 1) ? '0' + s : s;
        return h + ':' + s;
    }

    //视频统计
    function video_stats(current_vid) {
        console.log("视频统计");
        $.ajax({
            url: '/video_stats_index',
            type: "POST",
            dataType: "json",
            xhrFields: {withCredentials: true},
            data: {
                'currentTime': Player.currentTime(),
                'current_vid': current_vid,
                'type': "inline",
                'channel': 11,
                'exp': (Player.currentTime() / Player.duration() > 0.7) ? 1 : 0
            },
            success: function (res) {
                console.log(res);
            }
        });
    }
</script>

</body>
</html>